<script setup lang='ts'>
import {computed, ref, watch} from 'vue'
import {DialogProps, DialogEmits} from './dDialog'

const props = defineProps(DialogProps)
const emits = defineEmits(DialogEmits)

//显示
const dialog = ref(props.showDialog)

watch(
  () => props.showDialog,
  (showDrawer) => {
    dialog.value = showDrawer
  }
)

//取消
const onCancel = () => {
  emits('cancel')
}

//确认保存
const onConfirm = () => {
  emits('confirm')
}

//打开
const onOpen = () => {
  emits('open')
}

//关闭
const onClose = () => {
  emits('close')
}

const getCustomClass = computed(() => {
  if (props.customClass) {
    return 'd-dialog__wapper ' + props.customClass
  } else {
    return 'd-dialog__wapper'
  }
})

</script>

<template>
  <el-dialog
    v-model="dialog"
    :custom-class="getCustomClass"
    :close-on-click-modal="false"
    :title="title"
    :before-close="beforeClose"
    :append-to-body="true"
    :z-index="99"
    @open="onOpen"
    @close="onClose"
  >
    <template #default>
      <el-scrollbar>
        <slot name="default" />
      </el-scrollbar>
    </template>
    <template #footer>
      <div :class="buttonAlign?buttonAlign:'d-common-flex-algin-just'">
        <slot name="prepend" />
        <el-button @click="onCancel">
          {{ props.cancelText }}
        </el-button>
        <el-button v-if="!hideSaveBtn" type="primary" :loading="showSaveLoading" @click="onConfirm">
          {{ props.btntext }}
        </el-button>
        <slot name="append" />
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>